<template>
    <div class="layout-padding">
        <splitpanes horizontal>
            <pane size='45'>
                <div class="layout-padding-auto layout-padding-view">
                    <el-tabs model-value="first">
                        <el-tab-pane name="first">
                            <template #label>
                                <span class="ml-0.5">
                                    {{ $t('basItemRoute.processRoute') }}
                                </span>
                            </template>
                        </el-tab-pane>
                    </el-tabs>
                    <!--查询表单-->
                    <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">

                        <el-form-item :label="$t('basItemRoute.materialCode')" prop="materialCode">
                            <el-input v-model="state.queryForm.materialCode" clearable
                                :placeholder="$t('basItemRoute.enterMaterialCode')" />
                        </el-form-item>

                        <el-form-item :label="$t('basItemRoute.routeVerison')" prop="routeVerison">
                            <el-input v-model="state.queryForm.routeVerison" clearable
                                :placeholder="$t('basItemRoute.enterRouteVerison')" />
                        </el-form-item>


                        <el-form-item :label="$t('basItemRoute.isDefault')" prop="isDefault">
                            <el-select v-model="state.queryForm.isDefault" style="width: 160px">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button icon="el-icon-search" type="primary"  @click="getDataList">
                                {{ $t('basItemRoute.query') }}
                            </el-button>
                            <el-button icon="refresh"  @click="resetQuery">
                                {{ $t('basItemRoute.reset') }}
                            </el-button>
                            <el-button icon="Upload" type="success" @click="importFormDialogRef.openAddDialog()">
                                {{ $t('basItemRoute.import') }}</el-button>
                        </el-form-item>
                    </el-form>
                    <!--查询结果的列表-->
                    <el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border
                        style="width: 100%;height: 100%" :cell-style="tableStyle.cellStyle" stripe
                        :header-cell-style="tableStyle.headerCellStyle" @row-click="clickRow">
                        <el-table-column type="index" label="#" width="50" />
                        <el-table-column prop="itemCode" :label="$t('basItemRoute.materialCode')" />
                        <el-table-column prop="itemName" :label="$t('basItemRoute.materialName')" />
                        <el-table-column prop="routeVerison" :label="$t('basItemRoute.routeVerison')" />
                        <el-table-column prop="routeName" :label="$t('basItemRoute.routeName')" />
                        <el-table-column prop="isDefault" :label="$t('basItemRoute.isDefault')">
                            <template #default="scope">
                                <el-tag
                                    :type="scope.row.isDefault === 'Y' ? 'success' : 'danger'">
                                    {{ scope.row.isDefault === 'Y' ? $t('basItemRoute.yes') : $t('basItemRoute.no') }}
                                </el-tag>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                        v-bind="state.pagination" />
                </div>
            </pane>
            <pane size='55'>
                <div class="layout-padding-auto layout-padding-view">
                    <el-tabs model-value="first">
                        <el-tab-pane name="first">
                            <template #label>
                                <span class="ml-0.5">
                                    {{ $t('basItemRoute.processRouteDetail') }}
                                </span>
                                
                            </template>
                        </el-tab-pane>
                    </el-tabs>
                    <routeDetailForm ref="routeDetailFormDialogRef" @refresh="getDataList(false)"/>
                </div>
            </pane>
        </splitpanes>
        <importForm ref="importFormDialogRef" @getChildren="oncFun"/>
    </div>
</template>


<script setup lang="ts" >
import { BasicTableProps, useTable } from "/@/hooks/table";
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { getItemRouteHeaderList } from "/@/api/platform/digital/basItemRoute";
const { t } = useI18n();
const routeDetailForm = defineAsyncComponent(() => import('./routeDetail.vue'));
const importForm = defineAsyncComponent(() => import('./importForm.vue'));

const importFormDialogRef = ref()
const routeDetailFormDialogRef = ref()
//下拉框
const options = ref([
    { label: t('basItemRoute.all'), value: 'All' },
    { label: t('basItemRoute.yes'), value: 'Y' },
    { label: t('basItemRoute.no'), value: 'N' }
]);

const oncFun= (x:any) => {
    getDataList()
}

// 搜索变量
const queryRef = ref()
const equiptmentDialogRef = ref()

const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {},
    pageList: getItemRouteHeaderList
})

state.queryForm.isDefault = "All"

// 点击行的时候触发
const clickRow = (row: any) => {
    routeDetailFormDialogRef.value.refresh(row)
}

// 清空搜索条件
const resetQuery = () => {
    // 清空搜索条件
    queryRef.value?.resetFields()
    getDataList(false)

}

const {
    getDataList,
    currentChangeHandle,
    sizeChangeHandle,
    sortChangeHandle,
    downBlobFile,
    tableStyle
} = useTable(state)


</script>